<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
    <style>
        .dashboard {
            max-width: 1200px;
            margin: 0 auto;
        }
        .stats-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            padding: 20px;
            border-radius: 4px;
            background-color: #f5f7fa;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .stat-card h3 {
            margin-top: 0;
            color: #666;
            font-size: 16px;
        }
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="text" @click="goBack()">返回</el-button>

    <h1>课程详情</h1>
    <div class="dashboard">
        <!-- 日期选择器 -->
        <el-date-picker
            v-model="selectedDate"
            type="month"
            placeholder="选择月份"
            @change="fetchData"
            :picker-options="pickerOptions"
        ></el-date-picker>

        <!-- 统计卡片 -->
        <div class="stats-container">
            <div class="stat-card">
                <h3>成课节数</h3>
                <div class="value">{{ stats.completedLessons }}</div>
            </div>
            <div class="stat-card">
                <h3>取消节数</h3>
                <div class="value">{{ stats.cancelledLessons }}</div>
            </div>
            <div class="stat-card">
                <h3>约课人次</h3>
                <div class="value">{{ stats.bookings }} 人次</div>
            </div>
            <div class="stat-card">
                <h3>消耗次卡</h3>
                <div class="value">{{ stats.usedTimes }} 次</div>
            </div>
            <div class="stat-card">
                <h3>消耗储值卡</h3>
                <div class="value">¥{{ stats.usedBalance }}</div>
            </div>
        </div>

        <!-- 每日课程表格 -->
        <el-table :data="dailyCourses" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="120"></el-table-column>
            <el-table-column prop="courseName" label="课程名称"></el-table-column>
            <el-table-column prop="teacher" label="教师"></el-table-column>
            <el-table-column label="时间">
                <template #default="{ row }">
                    {{ row.startTime }} - {{ row.endTime }}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-tag :type="row.status === '已完成' ? 'success' : row.status === '已取消' ? 'danger' : 'info'">
                        {{ row.status }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>

<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<script>
new Vue({
    el: '#app',
    data() {
        return {
            selectedDate: new Date(),
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            stats: {
                completedLessons: 0,
                cancelledLessons: 0,
                bookings: 0,
                usedTimes: 0,
                usedBalance: 0
            },
            dailyCourses: []
        };
    },
    methods: {
        goBack() {
            window.history.back();
        },
        fetchData() {
            const year = this.selectedDate.getFullYear();
            const month = this.selectedDate.getMonth() + 1;
            
            // 模拟数据获取
            setTimeout(() => {
                this.stats = {
                    completedLessons: Math.floor(Math.random() * 100),
                    cancelledLessons: Math.floor(Math.random() * 20),
                    bookings: Math.floor(Math.random() * 200),
                    usedTimes: Math.floor(Math.random() * 150),
                    usedBalance: Math.floor(Math.random() * 10000)
                };

                this.dailyCourses = this.generateDailyCourses(year, month);
            }, 500);
        },
        generateDailyCourses(year, month) {
            const daysInMonth = new Date(year, month, 0).getDate();
            const courses = [];
            const courseNames = ['瑜伽入门', '燃脂搏击', '普拉提核心', '力量训练', '有氧操'];
            const teachers = ['张老师', '李教练', '王老师', '赵教练', '陈老师'];
            const statuses = ['已完成', '已取消', '进行中'];

            for (let day = 1; day <= daysInMonth; day++) {
                const numCourses = Math.floor(Math.random() * 3) + 1;
                for (let i = 0; i < numCourses; i++) {
                    const startHour = Math.floor(Math.random() * 8) + 9;
                    courses.push({
                        date: `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
                        courseName: courseNames[Math.floor(Math.random() * courseNames.length)],
                        teacher: teachers[Math.floor(Math.random() * teachers.length)],
                        startTime: `${startHour}:00`,
                        endTime: `${startHour + 1}:00`,
                        status: statuses[Math.floor(Math.random() * statuses.length)]
                    });
                }
            }
            return courses;
        }
    },
    mounted() {
        this.fetchData();
    }
});
</script>
</body>
</html>